<template>
  <Card title="专家推荐">
    <el-skeleton :rows="6" animated v-if="loading"/>
    <div class="ur" v-else>
      <div class="item" v-for="item in recommend" :key="item.id">
        <el-avatar :src="item.avatar" :size="50">
          <img class="avatar" src="~/static/img/defaultAvatar.png"/>
        </el-avatar>
        <div class="name">
          <UserInfo :user="item" :show-avatar="false"/>
        </div>
        <el-button class="btn" type="primary" size="mini" @click="askTo(item.id)">向TA提问</el-button>
      </div>
    </div>
  </Card>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "UserRecommend",
  data() {
    return {
      loading: false,
      recommend: []
    }
  },
  created() {
    this.getRecommend();
  },
  methods: {
    getRecommend() {
      let self = this;
      //缓存到store
      if (this.$store.state.userRecommend && this.$store.state.userRecommend.length > 0) {
        self.recommend = this.$store.state.userRecommend;
        return;
      }
      self.loading = true;
      api.getUserRecommend().then(res => {
        self.recommend = res;
        //缓存到store
        self.$store.commit('setUserRecommend', res);
      }).finally(() => self.loading = false);
    },
    askTo(userId) {
      this.$router.push({
        name: 'ask-to',
        params: {
          userId: userId
        }
      });
    }
  }
}
</script>

<style scoped lang="less">

.ur {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;

  .item {
    flex: 1;
    text-align: center;

    .name {
      margin: 10px 0;
      height: 19px;
      overflow: hidden;
    }

    .btn {

    }
  }
}
</style>
